
import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  TouchableHighlight,
  FlatList,
  ActivityIndicator,
} from 'react-native';

import { connect } from 'react-redux';
import device from '../../utils/device';

//导入组件
import {CustomFlatList,CustomFlatListItem} from '../../components/CustomFlatList';
import Swiper from 'react-native-swiper';

//导入样式
import homeStyle from './homeStyle';
import baseStyle from '../style/baseStyle';

var projectData = [
    {
      id:0,
      date:'2017-09',
      title:'河南中平鲁阳煤电公司2017年9月份动力煤司2017年9月份动力煤',
      amount:'0',
      cutdownTime:'3600',
      address:'河南中平鲁阳煤电有限公司'
    },
    {
      id:1,
      date:'2017-09',
      title:'河南中平鲁阳煤电公司2017年9月份动力煤',
      amount:'1',
      status:'finished',
      address:'河南中平鲁阳煤电有限公司'
    },
    {
      id:2,
      date:'2017-09',
      title:'河南中平鲁阳煤电公司2017年9月份动力煤',
      amount:'2',
      status:'finished',
      address:'河南中平鲁阳煤电有限公司'
    }
  ];
var newProjectData = projectData.slice();
var projectItemData = {
    date:'2017-09',
    title:'河南中平鲁阳煤电公司2017年9月份动力煤',
    amount:'4',
    status:'finished',
    address:'河南中平鲁阳煤电有限公司'
  };

class Home extends Component {

	constructor(props){
		super(props);
    this.state={
      animating:false,
      projectData
    }
	}

	componentWillMount(){
    
	}
  renderProjectItem = (data) => {
    // console.log(data,"-----",data.index)
    return (
        <TouchableHighlight 
          style={homeStyle.cardBox} 
          key={data.index} 
          underlayColor='#fff' 
          activeOpacity={0.6} 
          onPress={()=>{console.log(data.index)}}
        >
          <View style={{flex:1}}>
              <View style={homeStyle.cardHeader}>
                  <Image source={require('../../../img/month_icon.png')}  />
                  <Text style={{marginLeft:10,color:'#9AB8D8',fontSize:12}}>{data.item.date}</Text>
              </View>
              <View style={homeStyle.cardContent}>
                <Text numberOfLines={1} style={[baseStyle.color,{fontSize:15}]}>{data.item.title}</Text>
                <View style={{flexDirection:'row',justifyContent:'space-between'}}>
                  <View style={{flexDirection:'row'}}>
                    <Text style={{fontSize:18,color:'#FB6E6E'}}>{data.item.amount}</Text>
                    <Text style={{fontSize:12,color:'#666',alignSelf:'center',marginTop:5}}>万吨</Text>
                  </View>
                  <View style={homeStyle.cutdownBox}>
                    <Text style={homeStyle.cutdownItem}>12</Text>
                    <Text style={homeStyle.cutdownSeparater}>:</Text>
                    <Text style={homeStyle.cutdownItem}>36</Text>
                    <Text style={homeStyle.cutdownSeparater}>:</Text>
                    <Text style={homeStyle.cutdownItem}>36</Text>
                    <Text style={homeStyle.cutdownSeparater}>:</Text>
                    <Text style={homeStyle.cutdownItem}>36</Text>
                  </View>
                </View>
                <View style={{flexDirection:'row',justifyContent:'space-between',alignItems:'center'}}>
                  <Text numberOfLines={1} style={homeStyle.addresStyle} >收货地址：{data.item.address}阿斯顿发生发送</Text>
                  {/*<View style={baseStyle.btnColor}>
                    <Text style={baseStyle.btnColorText}>项目已完成</Text>
                  </View>*/}
                  <Text style={{color:'#9D9D9D',fontSize:10}}>报名截止</Text>
                </View>
              </View>
          </View>
        </TouchableHighlight>
    )
  }
	render() {
	    return (
	      <View style={baseStyle.backgroundColor}>
          <View style={homeStyle.bannerContainer}>
            <Swiper 
              showsButtons={false}
              autoplay={true}
              loop={true}
              autoplayTimeout={3}
              showsPagination={false}
              paginationStyle={{bottom:2}}
              dotColor="rgba(0,0,0,0.8)"
              activeDotColor="red"
            >
              <View style={homeStyle.bannerItem}>
                <Image 
                    source={{uri: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=344299713,2646238272&fm=27&gp=0.jpg'}} 
                    resizeMode='stretch'
                    style={{width: undefined, height: 120}}
                  />
              </View>
              <View style={homeStyle.bannerItem}>
                <Image 
                    source={{uri: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=344299713,2646238272&fm=27&gp=0.jpg'}} 
                    resizeMode='stretch'
                    style={{width: undefined, height: 120}}
                  />
              </View>
            </Swiper>
          </View>
          <TouchableHighlight underlayColor='#fff' activeOpacity={0.6} onPress={()=>{console.log(1)}}>
            <View style={homeStyle.forwardBar}>
                <View style={homeStyle.forwardIcon}>
                  <Image 
                    source={require('../../../img/forward_full_icon.png')} 
                    resizeMode='stretch'
                    style={homeStyle.forwardIconImg}
                  />
                <View >
                  <Text style={homeStyle.forwardText}>进入名企采购专区</Text>
                </View>
              </View>
            </View>
          </TouchableHighlight>
          <View style={homeStyle.procurementTitleBox}>
            <View style={homeStyle.procurementTitle}>
              <Text style={baseStyle.color}>采购信息</Text>
              <Image 
                source={require('../../../img/calendar_icon.png')} 
                resizeMode='stretch'
                style={{width:device.px(36),height:device.px(32)}}
              />
            </View>
          </View>
          <CustomFlatList 
            data={this.state.projectData}
            renderItem={this.renderProjectItem}
            onEndReached={()=>{
              let {projectData} = this.state;
              projectItemData.amount = projectData.length;
              projectItemData.id = Math.random();
              projectData.push({...projectItemData});
               this.setState({projectData});

            }}
            _onRefresh={(callback) =>{
              projectData.length = 3;
              this.setState({projectData})
              setTimeout(callback,1500);
            }}
            onEndReachedThreshold={0.3}
          />
        </View>
	    );
	}
}


function select(store){
    return {
        
    }
}
export default connect(select)(Home);